<template>
	<view>
		<navbar title="选择标签" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="u-flex u-flex-y-center u-flex-wrap" v-if="yxlist.length>0">
					<view class="con__yxbox" v-for="(item,index) in yxlist" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="con__box">
					<view class="">
						<view class="con__box__title">
							沟通状态
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap con__box__l">
							<view class="con__box__item" v-for="(item,index) in gtzt" :key="index"
								@click="clicks('gtzt',index)" :class="item.isx?'active':''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="con__box__title">
							逾期月份数
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap con__box__l">
							<view class="con__box__item" style="padding: 22rpx;" v-for="(item,index) in yqyf"
								:key="index" @click="clicks('yqyf',index)" :class="item.isx?'active':''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="con__box__title">
							逾期风险程度
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap con__box__l">
							<view class="con__box__item" v-for="(item,index) in yqfxcd" :key="index"
								@click="clicks('yqfxcd',index)" :class="item.isx?'active':''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="con__box__title">
							诉讼进度
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap con__box__l">
							<view class="con__box__item" v-for="(item,index) in ssjd" style="padding: 17rpx 30rpx;"
								:key="index" @click="clicks('ssjd',index)" :class="item.isx?'active':''">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="con__box__title">
							方式
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap con__box__l" style="margin-bottom: 20rpx;">
							<view class="con__box__item" v-for="(item,index) in fs" style="padding: 17rpx 38rpx;"
								:key="index" @click="clicks('fs',index)" :class="item.isx?'active':''">
								{{item.name}}
							</view>
						</view>
					</view>
					<u-button color="#3262FD" @click="submit"
						:customStyle='{width:"628rpx",height:"94rpx",margin:"0",padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'>保存</u-button>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				yxlist: [],
				gtzt: [{
					name: "沟通中",
					isx: false
				}, {
					name: "已经谈好",
					isx: false
				}, {
					name: "已经完善手续",
					isx: false
				}, {
					name: "准备诉讼",
					isx: false
				}, {
					name: "待办理转贷",
					isx: false
				}],
				yqyf: [{
						name: "M1",
						isx: false
					},
					{
						name: "M2",
						isx: false
					},
					{
						name: "M3",
						isx: false
					},
					{
						name: "M4",
						isx: false
					},
					{
						name: "M5",
						isx: false
					},
					{
						name: "M6",
						isx: false
					},
					{
						name: "M7",
						isx: false
					},
					{
						name: "M8",
						isx: false
					},
					{
						name: "M9",
						isx: false
					},
					{
						name: "M10",
						isx: false
					},
					{
						name: "M10以上",
						isx: false
					},
				],
				yqfxcd: [{
						name: "低风险",
						isx: false
					},
					{
						name: "中风险",
						isx: false
					},
					{
						name: "高风险",
						isx: false
					},
				],
				ssjd: [{
						name: "准备立案",
						isx: false
					},
					{
						name: "立案中",
						isx: false
					},
					{
						name: "已经立案",
						isx: false
					},
					{
						name: "已经立案",
						isx: false
					},
					{
						name: "申请执行",
						isx: false
					},
					{
						name: "执行中",
						isx: false
					},
					{
						name: "执行完毕",
						isx: false
					},
				],
				fs: [{
						name: "按揭",
						isx: false
					},
					{
						name: "全款",
						isx: false
					},
				],
				xzlist: [
					"gtzt", "yqyf", "yqfxcd", "ssjd", "fs"
				],
				type:null,
				id:null
			};
		},
		methods: {
			clicks(t, index) {
				this[t].map(t => {
					t.isx = false
				})
				this[t][index].isx = true
				this.yxlist = []
				let _this = this
				this.xzlist.map(t => {
					this[t].map(t1 => {
						if (t1.isx) {
							_this.yxlist.push({
								key: t,
								name: t1.name
							})
						}
					})
				})
			},
			async submit() {
				
				let arr = []
				this.yxlist.map(t => {
					arr.push(t)
				})
				if(this.type==1){
					// console.log(JSON.stringify(arr))
					let res=await sale.editcustomer({id:this.id,label:JSON.stringify(arr)})
					if(res.data.code==1){
						uni.navigateBack()
					}
					return
				}
				this.$store.commit('settagarr', arr)
				uni.navigateBack()
			},

		},
		onLoad(o) {
			this.type=o.type
			this.id=o.id
			// console.log(this.$store.state.tagarr)
			this.yxlist = this.$store.state.tagarr
			this.yxlist.map(t => {
				this[t.key].map(t1 => {
					if (t1.name == t.name) {
						t1.isx = true
					}
				})
			})

		}
	}
</script>

<style lang="scss">
	.con {
		padding: 20rpx 30rpx 53rpx;

		&__yxbox {
			padding: 22rpx 42rpx;
			background: #3262FD;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 26rpx;
			margin-right: 16rpx;
			margin-bottom: 29rpx;
		}

		&__box {
			// height: 1342rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 42rpx 0rpx 45rpx 30rpx;

			&__title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #888888;
				line-height: 24rpx;
				margin-bottom: 40rpx;
			}

			&__item {
				padding: 17rpx 26rpx;
				background: #F1F5F8;
				border-radius: 5rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #626667;
				line-height: 24rpx;
				margin: 0 18rpx 20rpx 0;
			}

			&__l {
				margin-bottom: 56rpx;
			}

			.active {
				background: #3262FD;
				color: #FFFFFF;
			}
		}
	}

	page {
		background-color: #f8f8f8;
	}
</style>